<template>
  <view class="hots">
		<!-- <down-load-app-com ></down-load-app-com> -->
    <nav-com></nav-com>
    <!-- <image class="head" mode="aspectFit" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/product/hot-past-head.png"></image> -->
		<image class="head" mode="aspectFit" src="/static/images/past-hots-top-bg.png"></image>
    <view class="content" v-if="pageItems.length>0">
      <hot-products-list-com :products="pageItems"></hot-products-list-com>
    </view>
  </view>
</template>

<script>
import Pagination from "mixins/Pagination"
import HotProductsListCom from "components/product/hot/HotProductsListCom"
import NavCom from "components/common/NavCom"
import {getHotProducts} from "api/productApi"

export default {
  name: "hots",
	mixins: [Pagination],
  components: {
		HotProductsListCom,
		NavCom
	},
  methods: {
    async loadPageItems() {
      return await getHotProducts({
        page: this.pageNumber,
        "filter[is_today]": 0,
        include: 'product'
      })
    }
  },
  async onLoad() {
    // await this.loadPageData()
  }
}
</script>

<style lang="scss" scoped>
.hots {
  .head {
    width: 750rpx;
    height: 432rpx;
  }
  .content {
    padding: 30rpx;
    background-color: #F6F6F6;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    position: relative;
    margin-top: -92rpx;
    z-index: 99;
  }
}
</style>
